/*
轮播图逻辑：
    .将所有图片放进对象数组
    .点击切换按钮时设置当前对象 display = 'block'
点击圆点切换图片逻辑
    1.获取到所有圆点
    2.判断当前点击的是第几个圆点
    3.将与圆点标号相同图片展示出来
*/

var index = 0,
    timer = null,
    pics = byId('banner').getElementsByTagName('img'),
    len = pics.length,
    dots = byId('dots').getElementsByTagName('span');
    prev = byId('prev'),
    next = byId('next');

console.log(dots);

//封装通过id获取DOM方法
function byId(id) {
    return typeof(id) === 'string'?document.getElementById(id):id;
}

//切换图片
function changeImg() {
    for(var i = 0 ; i < len ; i++){
        pics[i].style.display = 'none';
        dots[i].className = "";
    }
    pics[index].style.display = 'block';
    dots[index].className = "active";
}

function slideImg() {
    var main = byId('main');
    //划过清除定时器,离开继续
    main.onmouseover = function() {
        if(timer){
            clearInterval(timer);
        }
    }

    main.onmouseout = function() {
        timer = setInterval(function() {
            index = (index + 1) % len;
            console.log(index);
            //切换图片
            changeImg();
        },3000);
    }

    for(var i = 0 ; i < len ; i++){
        dots[i].id = i;
        dots[i].onclick = function(){
            index = this.id;
            changeImg();
        }
    }

    //上一张
    prev.onclick = function() {
        index = (index - 1);
        if (index < 0) {
            index = len - 1;
        }
        console.log(index);
        changeImg();
    }

    //下一张
    next.onclick = function() {
        index = (index + 1) % len;
        // console.log(index);
        changeImg();
    }

    main.onmouseout();
}

slideImg();

/*
总结：
    1.一组DOM对象需要设置其中一个active时,可以设置一个 active 类,给类设置属性
    2.当需要修改的DOM对象只有一个class时,可以直接修改该DOM对象的class
*/